<template>
  <div class="vol-tabs">
    <Tabs ref="tabs">
      <TabPane label="商品明细" icon="ios-aperture">
        <!-- 从表1配置 -->
        <div class="tabs1-header">
          <div class="message"></div>
          <!-- 显示操作按钮 -->
          <div class="btn-group">
            <Button type="info" size="small" ghost @click="add">添加行</Button>
            <Button type="info" size="small" ghost @click="del">删除行</Button>
            <!-- <Button type="info"
                    size="small"
                    ghost
                    @click="getRows">获取选中的行</Button> -->
            <Button
              type="info"
              size="small"
              ghost
              @click="
                () => {
                  $refs.table1.load();
                }
              "
              >刷新</Button
            >
          </div>
        </div>
        <vol-table
          ref="table1"
          :clickEdit="true"
          :loadKey="true"
          :columns="tableColumns1"
          :pagination-hide="false"
          :height="200"
          :url="table1Url"
          :index="true"
          @loadBefore="loadTableBefore1"
          @loadAfter="loadTableAfter1"
        ></vol-table>
      </TabPane>
      <TabPane
        label="套票明细"
        :disabled="show"
        :closable="true"
        icon="ios-aperture"
      >
        <!-- 从表2配置 ,双击可以开启编辑-->
        <div class="tabs1-header">
          <!-- 显示操作按钮 -->
          <div class="message"></div>
          <div class="btn-group">
            <Button
              type="info"
              size="small"
              ghost
              @click="
                () => {
                  $refs.table2.addRow({});
                }
              "
              >添加行</Button
            >
            <Button
              type="info"
              size="small"
              ghost
              @click="
                () => {
                  $refs.table2.load();
                }
              "
              >刷新</Button
            >
          </div>
        </div>
        <vol-table
          ref="table2"
          :loadKey="true"
          :clickEdit="true"
          :columns="tableColumns2"
          :pagination-hide="false"
          :max-height="450"
          :url="table2Ur"
          :index="true"
          :ck="false"
          @loadBefore="loadTableBefore2"
          @loadAfter="loadTableAfter2"
        ></vol-table>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
//开发一对多从表需要参照voltable与viewgrid组件api
import VolTable from "@/components/basic/VolTable.vue";
import data from "../../../views/builder/builderData";
export default {
  components: { VolTable },
  data() {
    return {
      isHotel: false, //true显示酒店的从表 false其他从表
      specList: [],
      //从表1
      table1Url: "api/Products/getDetailPage", //table1获取数据的接口
      //表配置的字段注意要与后台返回的查询字段大小写一致 tableColumns1
      tableColumns1: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "name",
          title: "名称",
          type: "string",
          width: 150,
          align: "left",
          sortable: true,
          edit: { type: "text" },
          align: "left",
        },
        {
          field: "code",
          title: "编码",
          type: "string",
          width: 100,
          align: "left",
          sortable: true,
          edit: { type: "text" },
        },
        {
          field: "name2",
          title: "简称",
          type: "string",
          width: 100,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "offlineCode",
          title: "线下编码",
          type: "string",
          width: 100,
          align: "left",
          edit: { type: "text" },
        },

        //    {field:'productID',title:'产品ID',type:'string',width:90,align:'left'},
        {
          field: "uiType",
          title: "ui类型",
          type: "string",
          bind: { key: "uiType", data: [] },
          edit: { type: "select" },
          width: 100,
        },
        {
          field: "originalPrice",
          title: "原价",
          type: "decimal",
          width: 120,
          align: "left",
          edit: { type: "decimal" },
        },
        {
          field: "preferentialPrice",
          title: "优惠价",
          type: "decimal",
          width: 120,
          align: "left",
          edit: { type: "decimal" },
        },
        {
          field: "num",
          title: "数量",
          type: "number",
          width: 120,
          align: "left",
          edit: { type: "number" },
          hidden:true
        },
        //  {field: 'spare1', title: "时段",type: 'string',bind:{key:'attr_sd', data:[]},edit:{type:'select'},hidden:true, width: 100},
        //  {field: 'spare2', title: "教学人数",type:'string',bind:{key:'attr_jxrs', data:[]},edit:{type:'select'},hidden:true, width: 100},
        //  {field: 'spare3', title: "淡旺季",type: 'string',bind:{key:'attr_dwj', data:[]},edit:{type:'select'},hidden:true, width: 100},
        //  {field: 'spare4', title: "教学等级",type: 'string',bind:{key:'attr_jxdj', data:[]},edit:{type:'select'},hidden:true, width: 100},
        //  {field: 'spare5', title: "教学时长",type: 'string',bind:{key:'attr_jxsc', data:[]},edit:{type:'select'},hidden:true, width: 100},
        //  {field: 'spare6', title: "滑雪时长",type: 'string',bind:{key:'attr_hxsc', data:[]},edit:{type:'select'},hidden:true, width: 100},
      ],
      //从表2
      table2Ur: "", //table1获取数据的接口
      //表配置的字段注意要与后台返回的查询字段大小写一致
      tableColumns2: [
        { field: "id", title: "主键ID", type: "int", width: 80, hidden: true },
        {
          field: "name",
          title: "姓名",
          // edit: { type: "text" },
          edit: { type: "selectList", key: "pms_Room_Code", data: [] },
          bind: { key: "pms_Room_Code", data: [] },

          type: "selectList",
          width: 120,
        },
        {
          field: "phoneNo",
          title: "电话",
          type: "text",
          edit: { type: "text" },
          width: 150,
        },
        {
          field: "describe",
          title: "描述",
          type: "text",
          edit: { type: "text" },
          width: 300,
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "text",
          edit: { type: "datetime" },
          width: 150,
        },
      ],
      // //酒店的房型从表 hotelTableColumns
      // hotelTableUrl: "",
      // hotelTableColumns: [
      //   {
      //     field: "hotelid",
      //     title: "主键",
      //     type: "int",
      //     width: 90,
      //     hidden: true,
      //     readonly: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "room_Name",
      //     title: "房型名称",
      //     type: "string",
      //     width: 120,
      //     edit: { type: "text" },
      //     align: "left",
      //     sortable: true,
      //   },
      //   {
      //     field: "room_Code",
      //     title: "房型编码",
      //     type: "string",
      //     width: 120,
      //     edit: { type: "text" },
      //     align: "left",
      //   },
      //   {
      //     field: "pms_Room_Code",
      //     title: "pms房型代码",
      //     type: "selectList",
      //     bind: { key: "pms_Room_Code", data: [] },
      //     width: 120,
      //     align: "left",
      //     edit: { type: "selectList", key: "pms_Room_Code", data: [] },
      //   },
      //   {
      //     field: "real_Quantity",
      //     title: "实际数量",
      //     type: "int",
      //     width: 90,
      //     edit: { type: "number" },
      //     align: "left",
      //   },
      //   {
      //     field: "room_Introduction",
      //     title: "房型介绍",
      //     type: "string",
      //     hidden: true,
      //     bind: { key: "room_Introduction", data: [] },
      //     width: 120,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "imageAddress",
      //     title: "轮播图",
      //     type: "img",
      //     width: 200,
      //     hidden: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "room_direction",
      //     title: "房间朝向",
      //     type: "string",
      //     width: 90,
      //     hidden: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "room_area",
      //     title: "房间面积",
      //     type: "decimal",
      //     width: 90,
      //     hidden: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "Facilities_and_Features",
      //     title: "设施与功能( 1 无烟房 2 WiFi 3 电话 4 迷你吧 5 送餐)",
      //     type: "string",
      //     width: 200,
      //     hidden: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "createDate",
      //     title: "创建时间",
      //     type: "datetime",
      //     width: 150,
      //     align: "left",
      //     hidden: true,
      //     sortable: true,
      //   },
      //   {
      //     field: "createID",
      //     title: "创建人ID",
      //     type: "int",
      //     width: 90,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "creator",
      //     title: "创建人",
      //     type: "string",
      //     width: 120,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "modifyDate",
      //     title: "修改时间",
      //     type: "datetime",
      //     width: 150,
      //     align: "left",
      //     hidden: true,
      //     sortable: true,
      //   },
      //   {
      //     field: "modifier",
      //     title: "修改人",
      //     type: "string",
      //     width: 120,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "modifyID",
      //     title: "修改人ID",
      //     type: "int",
      //     width: 90,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "typeName",
      //     title: "产品类型名称",
      //     link: true,
      //     type: "string",
      //     width: 150,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "typeCode",
      //     title: "产品类型编码",
      //     type: "string",
      //     width: 150,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "isAvailable",
      //     title: "是否可用",
      //     type: "sbyte",
      //     width: 90,
      //     hidden: true,
      //     require: true,
      //     align: "left",
      //   },
      //   {
      //     field: "room_picture",
      //     title: "头图",
      //     type: "img",
      //     width: 90,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "latitude",
      //     title: "经纬度",
      //     type: "string",
      //     width: 220,
      //     hidden: true,
      //     align: "left",
      //   },
      //   {
      //     field: "people_Number",
      //     title: "房间最多可住人数",
      //     type: "int",
      //     width: 90,
      //     hidden: true,
      //     align: "left",
      //   },
      // ],
      show: false,
    };
  },
  methods: {
    getcolum(val, currentAction, productName, productcode) {
      var that = this.$store.getters.data().reportPrice;

      console.log(that.formFileds);
      this.http
        .post("api/producttypes/getProtypeModel?id=" + val, "", true)
        .then((reslut) => {
          let attr = reslut.attributes.split(",");
          let attrname = reslut.attributeName.split(",");
          let uiType = reslut.uiType;
          let param = [];
          for (let indexs = 0; indexs < attrname.length; indexs++) {
            switch (attr[indexs]) {
              case "1111":
                // options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string',edit:{type:'select'}, width: 100,bind:{key:'attr_sd', data:[]}};
                param.push("attr_sd");
                break;
              case "1112":
                // options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_jxrs', data:[]}};
                param.push("attr_jxrs");
                break;
              case "1113":
                // options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string',width: 100,bind:{key:'attr_dwj', data:[]}};
                param.push("attr_dwj");
                break;
              case "1114":
                //options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_jxdj', data:[]}};
                param.push("attr_jxdj");
                break;
              case "1115":
                //options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_jxsc', data:[]}};
                param.push("attr_jxsc");
                break;
              case "1116":
                // options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_hxsc', data:[]}};
                param.push("attr_hxsc");
                break;
              case "1117":
                //options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_rq', data:[]}};
                param.push("attr_rq");
                break;
              case "1118":
                //options = { field: 'spare'+(indexs+1), title: attrname[indexs],type: 'string', width: 100,bind:{key:'attr_rq', data:[]}};
                param.push("attr_fx");
                break;
              default:
                //这里是没有找到对应的值处理
                break;
            }
          }
          this.http
            .post("api/Dictionary/GetVueDictionary", param, true)
            .then((reslut) => {
              for (let index = 0; index < this.tableColumns1.length; index++) {
                const row = this.tableColumns1[index];
                if (row.field != "preferentialPrice") {
                  continue;
                }
                //参数配置见文档VolTable组件中columns的属性
                let options = {};
                let attr_sd = [];
                let attr_jxrs = [];
                let attr_dwj = [];
                let attr_jxdj = [];
                let attr_jxsc = [];
                let attr_hxsc = [];
                let attr_rq = [];
                let attr_fx = [];
                param.forEach((item) => {
                  switch (item) {
                    case "attr_sd":
                      attr_sd = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_jxrs":
                      attr_jxrs = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_dwj":
                      attr_dwj = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_jxdj":
                      attr_jxdj = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_jxsc":
                      attr_jxsc = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_hxsc":
                      attr_hxsc = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_rq":
                      attr_rq = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                    case "attr_fx":
                      attr_fx = reslut.find(
                        (item1) => item1.dicNo == item
                      ).data;
                      break;
                  }
                });
                for (let indexs = 0; indexs < attrname.length; indexs++) {
                  switch (attr[indexs]) {
                    case "1111":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_sd", data: attr_sd },
                      };
                      //param.push("attr_sd");
                      break;
                    case "1112":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_jxrs", data: attr_jxrs },
                      };
                      //param.push("attr_jxrs");
                      break;
                    case "1113":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_dwj", data: attr_dwj },
                      };
                      //param.push("attr_dwj");
                      break;
                    case "1114":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_jxdj", data: attr_jxdj },
                      };
                      //param.push("attr_jxdj");
                      break;
                    case "1115":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_jxsc", data: attr_jxsc },
                      };
                      //param.push("attr_jxsc");
                      break;
                    case "1116":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_hxsc", data: attr_hxsc },
                      };
                      //param.push("attr_hxsc");
                      break;
                    case "1117":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_rq", data: attr_rq },
                      };
                      //param.push("attr_rq");
                      break;
                    case "1118":
                      options = {
                        field: "spare" + (indexs + 1),
                        title: attrname[indexs],
                        type: "string",
                        width: 100,
                        bind: { key: "attr_fx", data: attr_fx },
                      };
                      //param.push("attr_rq");
                      break;
                    default:
                      //这里是没有找到对应的值处理
                      break;
                  }
                  //在city(地区)列后添加一行
                  this.tableColumns1.splice(index + (indexs + 1), 0, options);
                }
              }
              let list = [];
              this.specList = list;
              let _this = this;
              //console.log(reslut)
              if (currentAction != "update") {
                let row = {};
                param.forEach((item) => {
                  var obj = that.formFileds[item];
                  if (obj.length != 0) {
                    list.push(obj);
                  }
                });
                var results = [];
                var result = {};
                console.log(list);
                getPriceTable(list, 0);
                function getPriceTable(arr, index) {
                  if (arr[index].length == 0 && index != arr.length - 1) {
                    getPriceTable(arr, index + 1);
                    return;
                  } else if (
                    arr[index].length == 0 &&
                    index == arr.length - 1
                  ) {
                    //result['uiType']=uiType;
                    results.push(JSON.parse(JSON.stringify(result)));
                  }
                  for (var i = 0; i < arr[index].length; i++) {
                    result["spare" + (getIndex(index) + 1)] =
                      _this.getSpecValueObjByName(index, arr[index][i].key);
                    // result['Header' + getIndex(index)].SpecCode = _this.specList[index].Id;
                    if (index != arr.length - 1) {
                      getPriceTable(arr, index + 1);
                    } else {
                      results.push(JSON.parse(JSON.stringify(result)));
                    }
                  }
                }
                function getIndex(index) {
                  if (index == 0) {
                    return index;
                  } else {
                    var num = 0;
                    for (var i = 0; i < list.length; i++) {
                      if (i == index) {
                        break;
                      } else if (list[i].length > 0) {
                        num++;
                      }
                    }
                    return num;
                  }
                }

                for (let j = 0; j < results.length; j++) {
                  row = {};
                  // for (let i = 0; i < results[j].length; i++) {
                  //   console.log(reslutp[j][i])
                  //   row.name=results[j]['spare'+(i+1)].value;
                  //   row.code=results[j]['spare'+(i+1)].key;
                  //   row['spare'+(i+1)]=results[j]['spare'+(i+1)].key
                  // }
                  for (let i = 0; i < attr.length; i++) {
                    console.log(results[j]["spare" + (i + 1)]);
                    if (i == 0 && results[j]["spare" + (i + 1)]) {
                      row.name = results[j]["spare" + (i + 1)].value;
                      row.code = results[j]["spare" + (i + 1)].key;
                      row["spare" + (i + 1)] =
                        results[j]["spare" + (i + 1)].key;
                    } else if (
                      i + 1 == attr.length &&
                      results[j]["spare" + (i + 1)]
                    ) {
                      row.name += results[j]["spare" + (i + 1)].value;
                      row.code += results[j]["spare" + (i + 1)].key;
                      row["spare" + (i + 1)] =
                        results[j]["spare" + (i + 1)].key;
                    } else if (results[j]["spare" + (i + 1)]) {
                      row.name += results[j]["spare" + (i + 1)].value;
                      row.code += results[j]["spare" + (i + 1)].key;
                      row["spare" + (i + 1)] =
                        results[j]["spare" + (i + 1)].key;
                    }
                    // else{
                    // row.name+=results[j]['spare'+(i+1)].value;
                    // row.code+=results[j]['spare'+(i+1)].key;
                    // }
                    // row['spare'+(i+1)]=results[j]['spare'+(i+1)].key
                  }
                  row.name += "_" + productName;
                  row.code += "_" + productcode;
                  row.originalPrice = 0;
                  row.preferentialPrice = 0;
                  row.uiType = uiType;
                  row.name2 = productName;
                  this.$refs.table1.addRow(row);
                }
              }
              //row.name=1;
              //this.$refs.table1.addRow(row);
            });
        });
    },
    getSpecValueObjByName(index, name) {
      let list = this.specList[index];
      var obj = list.find((item) => item.key == name);
      return obj || {};
    },
    //第一次打开弹出框时，如果是新建功能，禁止从后台查询
    loadTableBefore(param, callBack) {
      //获取查询页面的整个vue对象(对象是在App_ReportPrice.js的onInit时缓存起来的)
      let _this = this.$store.getters.data().reportPrice;
      //如果是新建功能，禁止从后台查询
      if (_this.currentAction == "Add") {
        return callBack(false);
      }
      //如果是酒店标间的话显示酒店的从表
      if (_this.currentRow.type == "BiaoJian") {
        this.isHotel = true;
      } else {
        this.isHotel = false;
      }
      //获取当前选中行的主键
      let id = _this.currentRow.id;
      //添加从表的查询参数(条件)
      //将当前选中的行主键传到后台用于查询(后台在GetTable2Data(PageDataOptions loadData)会接收到此参数)
      param.value = id;
      param.sort = "CreateDate";
      this.getcolum(_this.currentRow.type, _this.currentAction);
      callBack(true);
    },

    isPackage(val) {
      if (val == 1) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    //加载从表1数据数前
    loadTableBefore1(param, callBack) {
      this.loadTableBefore(param, callBack);
    },
    //加载从表2数据数前
    loadTableBefore2(param, callBack) {
      this.loadTableBefore(param, callBack);
    },
    //从后台加载从表1数据后
    loadTableAfter1(data, callBack) {
      return true;
    },
    //从后台加载从表2数据后
    loadTableAfter2(data, callBack) {
      return true;
    },
    remoteLoad() {},
    del() {
      let rows = this.$refs.table1.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.table1.delRow();
    },
    clear() {
      this.$refs.table1.reset();
      this.resetRow();
    },
    add() {
      this.$refs.table1.addRow({});
    },
    // 酒店从表添加行
    addHotelTable() {
      this.$refs.hotelTable.addRow({
        // hotelid: "",
        // room_Name: "",
        // room_Code: "",
        // pms_Room_Code: "",
        // real_Quantity: "",
      });
    },
    // 酒店从表删除行
    delHotelTable() {
      let rows = this.$refs.hotelTable.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.hotelTable.delRow();
    },
    resetRow() {
      for (let index = 0; index < this.tableColumns1.length; index++) {
        const row = this.tableColumns1[index];
        if (row.field == "preferentialPrice") {
          this.tableColumns1.splice(index + 1, 1);
        }
        if (row.field.startsWith("spare")) {
          this.tableColumns1.splice(index, 1);
          this.tableColumns1.splice(index, 2);
        }
      }
    },
    getRows() {
      //获取选中的行
      let rows = this.$refs.table1.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$Message.error(JSON.stringify(rows));
    },
  },
};
</script>
<style lang="less" scoped>
.vol-tabs {
  background: white;
}
.tabs1-header {
  display: flex;
  text-align: right;
  padding: 10px;
  .btn-group {
    flex: 1;
  }
}
</style>
